<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
    String basePath = request.getContextPath();
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--[if !IE]><!-->
<style type="text/css">
body {
    font-size: 12px;
    color: #FFF;
    background: #000 url(../images/body_bg_new.jpg) repeat fixed center top;
}

div {
    text-align: center;
    background: url(../images/box_bg.png) repeat bottom;
    -moz-box-shadow: 10px 10px 43px #000000;
    -webkit-box-shadow: 10px 10px 43px #000000;
    box-shadow: 10px 10px 43px #000000;
    border-radius: 10px; /* 角度圆滑*/
}

/* div居中*/
.center {
    position: absolute;
    width: 300px;
    height: 250px;
    left: 50%;
    top: 50%;
    margin: -125px 0px 0px -150px;
}

ul {
    padding: 3px 10px 0 10px;
    list-style: none;
}

ul li {
	 line-height:40px;
}

input {
    width: 97%;
    font-size: 20px;
    border: 0;
    padding: 3px 0px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.2);
    color: #FFF;
}

font {
    font-size: 20px;
    color: red;
}
</style>
<title>spring-mvc-hibernate</title>
<jsp:include page="/js/common.jsp" />
<script type="text/javascript">
function verification() {
    var params = $('#login_form').serialize();
    $.ajax({
        url : 'admin/user/login',
        type : 'post',
        dataType : 'jsonp',
        jsonp : 'jsonCallback',
        data : params,
        success : function( data ){
            if(data.status) {
                window.location.href = '<%=basePath%>/admin/user/view';
			} else {
			    $("#login_error_info").html("用户名或登录密码错误");
			}
        }
    });
}
$(function () {
	// 设置光标在用户名输入框内
	$('#name').focus();
	$('body').keydown(function (e) {
		var code = (e ? e : event).keyCode;
		// 清除错误提示信息
		$('#login_error_info').html('');
		if (code == 13) {
			verification();
		}
	});
});
</script>
<!--<![endif]-->
</head>
<body>
<!--[if !IE]><!-->
<div class="center">
    <h1>用户登录</h1>
    <form id="login_form" method="post">
        <ul>
            <li>
            	<input type="text" name="name" id="name" placeholder="用户名" />
            </li>
            <li>
            	<input type="password" name="password" id="password"
                placeholder="密码" /></li>
            <li>
            	<input type="button" value="登录" onclick="verification()"
					onblur="$('#login_error_info').html('')" />
            </li>
            <li>
            	<font class="error" id="login_error_info"></font>
            </li>
        </ul>
    </form>
</div>
<!--<![endif]-->
<!--[if IE]>
<center><h1>本系统单方面决定不支持IE浏览器,如需继续访问,请更换google或firefox</h1></center>
<![endif]-->
</body>
</html>